<template>
  <!-- 商品统计 -->
  <div class="echarts-box">
    <div id="main"></div>
  </div>
</template>

<script>
  import { statGoods } from '@/api/stat'
  import * as echarts from 'echarts';
  export default {
    data() {
      return {
        list: null,

      }
    },
    mounted() {
      this.getList()
    },
    methods: {
      getList() {
        statGoods().then(response => {
          this.list = response.data.data.rows
          console.log(this.list);
          this.handleInitCharts()
        })

      },
      handleInitCharts() {
        let amount = this.list.map(el => {
          return el.amount
        })
        let products = this.list.map(el => {
          return el.products
        })
        let day = this.list.map(el => {
          return el.day
        })
        let orders = this.list.map(el => {
          return el.orders
        })
        
        const colors = ['#1CD5AF', '#5AB0EE','#F96E85','#FFB980'];
        var myChart = echarts.init(document.getElementById('main'));
        myChart.setOption({
          color: colors,
          tooltip: {
            // trigger: 'none',
            axisPointer: {
              // type: 'cross'
            }
          },
          legend: {},
          grid: {
            top: 70,
            bottom: 50
          },
          xAxis: [
            {
              type: 'category',
              data: day
            },
          ],
          yAxis: [
            {
              type: 'value',
              axisLine: { show: false }
            }
          ],
          series: [
            {
              name: '订单量',
              type: 'line',
              smooth: true,
              emphasis: {
                focus: 'series'
              },
              data: orders
            },
            {
              name: '下单货品数量',
              type: 'line',
              smooth: true,
              emphasis: {
                focus: 'series'
              },
              data: products
            },
            {
              name: '下单货品总额',
              type: 'line',
              smooth: true,
              emphasis: {
                focus: 'series'
              },
              data: amount
            },
          ]
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .echarts-box {
    padding: 10px;

    #main {
      width: 100%;
      height: 400px;
    }
  }
</style>